<template>
	<view class="content">
		<!--搜索框-->
		<view class="content_1">
			<view class="input_view">
				<image class="input_icon" src="../../static/index/search/search.png"></image>
				<input class="input" placeholder="请输入小区和地名" @blur="completeInput"></input>
			</view>
			<view class="cancel" @click="back">取消</view>
		</view>
		<!--搜索历史-->
		<view class="content_2" v-if="searchstate == 'null'">
			<view class="history_title">搜索历史</view>
			<view class="history_view">
				<image class="history_icon" src="../../static/index/search/history.svg"></image>
				<view class="history">历史历史历史历史</view>
			</view>
		</view>
		<!--搜索内容-->
		<view class="content_3" v-if="searchstate == '0'">
			<view class="none_search">
				<view class="search_tips">无结果</view>
				<view class="search_tips">请重新搜索</view>
			</view>
		</view>
		<!--搜索内容-->
		<view class="content_3" v-if="searchstate == '1'">
			<block v-for="(house, index_house) in houseList" :key='index_house'>
				<view class="house_view" @click="toDetail(index_house)">
					<image class="house_img" :src="getPath(house.house_image)"></image>
					<view class="house_detail">
						<view class="house_name">{{house.house_name}}</view>
						<view class="house_info">{{house.house_type}}·{{house.house_direction}}·{{house.house_area}}·{{house.house_floor}}</view>
						<view class="house_info">{{house.house_name}}·{{house.house_addr}}</view>
						<view class="house_tips">
							<view class="tips">{{house.house_tips1}}</view>
							<view class="tips">{{house.house_tips2}}</view>
						</view>
						<view class="house_money">¥ {{house.house_money}} </view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				searchstate: '1',
				houseList: [],
			}
		},
		methods: {
			//获取图片路径
			getPath: function(imagePath) {
				return 'https://api.yihua.pub' + imagePath
			},
			//输入框失去焦点,用户输入完成,获取用户输入,调用接口
			completeInput: function(e) {
				new Request('Search_house/SearchHouseName').request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							search_data: e.detail.value
						}
					},
					(res)=>{
						if(res.data.code == 0){
							new Request().showToast(res.data.msg, 'success')
							return;
						}
						console.log(res)
						this.searchstate = res.data.code
						this.houseList = res.data.data
						console.log(this.searchstate)
					}
				)
			},
			//跳转至详细页,带商品id给后台
			toDetail: function(index) {
				new Request('Get_House_Info/GetHouseDetailInfo').request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							house_id: this.houseList[index].id
						}
					},
					(res)=>{
						this.id = this.houseList[index].id
						uni.navigateTo({
							url: '/pages/index/detail/detail?id=' + this.id
						})
					}
				)
			},
			//返回
			back:function () {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	/*
		搜索框样式
	*/
	.content_1 {
		margin-top: 20upx;
		padding: 0upx 35upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input_view {
		height: 90upx;
		background-color: #FFFFFF;
		width: 590upx;
		border-radius: 16upx;
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.cancel {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #B3E9DC;
	}

	.input_icon {
		height: 48upx;
		width: 48upx;
		margin-right: 30upx;
	}

	.input {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
	}

	/*
		搜索历史样式
	*/
	.content_2 {
		margin-top: 30upx;
		padding: 0upx 40upx;
		display: flex;
		flex-direction: column;
	}

	.history_title {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #999999;
		margin-bottom: 40upx;
	}

	.history_view {
		height: 46upx;
		display: flex;
		align-items: center;
		margin-bottom: 40upx;
	}

	.history_icon {
		height: 36upx;
		width: 36upx;
		margin-right: 20upx;
	}

	.history {
		height: 46upx;
		line-height: 46upx;
		font-size: 28upx;
		color: #666666;
	}
	
	/*
		搜索内容样式
	*/
	.content_3{
		margin-top: 30upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.none_search{
		margin-top: 230upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.search_tips{
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #999999;
	}
	
	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		margin-bottom: 40upx;
		display: flex;
		align-items: center;
	}
	
	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}
	
	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}
	
	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.house_tips {
		height: 30upx;
		display: flex;
	}
	
	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}
	
	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}
</style>
